<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>礼物</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
	<script src="js/jquery-2.0.3.js"></script>
	<script src="js/bootstrap.js"></script>
	<style>
		* {
			box-sizing: border-box;
		}
		html,body {
			margin: 0;
			padding: 0;
			border: 0;
		}
		.shou {
			width: 100%;
			background-color: #F9DBD1;
		}
		.tu1 {
			width: 7.2rem;
			height: auto;
			margin: 0 auto;
		}
		.tu2 {
			width: 7.2rem;
			height: auto;
			margin: 0 auto;
			background-color: #F16E62;
		}
		.tu3 {
			width: 7.2rem;
			height: auto;
			margin: 0 auto;
			background-color: #F9F1DA;
		}
		.tu4 {
			width: 7.2rem;
			height: auto;
			margin: 0 auto;
			background-color: #F1BB64;
		}
		.tu5 {
			width: 7.2rem;
			height: auto;
			margin: 0 auto;
			background-color: #E6FBF4;
		}
		.tu6 {
			width: 7.2rem;
			height: auto;
			margin: 0 auto;
			background-color: #ffffff;
		}
		.shou img {
			width: 7.2rem;
		}
		.xiangdui {
			width: 7.2rem;
			margin: 0 auto;
			background-color:#ffffff;
		}
		.tu7 {
			width: 3.3rem;
			height: 3.7rem;
			display: inline-block;
			background-color: #ffffff;
			margin: 0 auto;
			margin-top: 0.2rem;
			background-image:url("7-8d974b90a6.png");
		}
		.tu7 img {
			width: 2rem;
			height: 2rem;
			margin-left: 0.7rem;
			margin-top: 0.1rem;
		}
		.tu71 {
			width: 3.3rem;
			height: 1.6rem;
		}
		.tu8 {
			width: 3.3rem;
			height: 3.7rem;
			margin: 0 auto;
			display: inline-block;
			/*border: 5px solid salmon;*/
			background-image:url("7-8d974b90a6.png");
		}
		.tu8 img {
			width: 2rem;
			height: 2rem;
			margin-left: 0.7rem;
			margin-top: 0.1rem;
		}
		.tu81 {
			width: 3.25rem;
			height: 1.6rem;
		}
		h4 {
			font-size: 0.3rem;
			margin: 0;
			margin-left: 0.7rem;
		}
		.tu7 p {
			font-size: 0.3rem;
			color: #FD6B01;
			margin: 0;
			margin-left: 1.2rem;
			margin-top: 0.1rem;
		}
		.tu8 p {
			font-size: 0.3rem;
			color: #FD6B01;
			margin: 0;
			margin-left: 1.2rem;
			margin-top: 0.1rem;
		}
		span {
			font-size: 0.2rem;
			margin: 0;
		}
		button {
			font-size: 0.2rem;
			background-color: #FD6B01;
			color: #ffffff;
			float: right;
			margin-right: 1.2rem;
			margin-top: 0.2rem;
		}
		.tu9 {
			background-color: #F9DBD1;
		}
		.quan {
			width: 7.2rem;
			height: 7rem;
			margin: 0 auto;
		}
		.tu10 {
			display: inline-block;
			border: 1px solid salmon;
			margin-top: 0.2rem;
		}
		.tu10 img {
			width: 3.3rem;
			height: 3.59rem;
		}
		.tu11 {
			position: relative;
		}
		.tu11 img {
			width: 1.35rem;
			height: 0.5rem;
			margin-bottom: 0.5rem;
		}
		.tu11 p{
			font-size: 0.3rem;
			margin: 0;
			position: absolute;
			top: 0.6rem;
			right: 1rem;
			color: tomato;
			margin-bottom: 3rem;

		}
		.wei {
			width: 100%;
			height: 0.2rem;
			background-color: violet;
		}
		.wei span{
			font-size: 0.2rem;
			float: right;
		}
	</style>
</head>
<body>
<div class="shou">
	<div class="tu1">
	<img src="1-2e3119e78f.jpg">
	</div>
	<div class="tu2">
	<img src="2-c3dcf31e7a.jpg">
	</div>
	<div class="tu3">
	<img src="3-b9e7bbc794.jpg">
	</div>
	<div class="tu4">
	<img src="4-abaf40f691.jpg">
	</div>
	<div class="tu5">
	<img src="5-92705e247b.jpg">
	</div>
	<div class="tu6">
	<img src="6-35a35087b2.jpg">
	</div>
	<div class="xiangdui">
<div class="tu7">
	<img src="T18QA_BbJv1RXrhCrK.jpg" alt=""/>
<div class="tu71">
	<h4>16000mAh电源</h4>
	<p>109<span>元</span></p>
	<button type="button" class="btn btn-default">立即购买</button>
</div>
</div>
<div class="tu8">
	<img src="T1tADgBQAv1RXrhCrK.jpg" alt=""/>
<div class="tu81">
	<h4>小米蓝牙音箱</h4>
	<p>189<span>元</span></p>
	<button type="button" class="btn btn-default">立即购买</button>
</div>
</div>
		<div class="tu7">
			<img src="T14WVvBCW_1RXrhCrK.jpg" alt=""/>
			<div class="tu71">
				<h4>小钢炮蓝牙音箱</h4>
				<p>99<span>元</span></p>
				<button type="button" class="btn btn-default">立即购买</button>
			</div>
		</div>
		<div class="tu7">
			<img src="T1GxCvBghT1RXrhCrK!350x350.jpg" alt=""/>
			<div class="tu71">
				<h4>Yeelight床头灯</h4>
				<p>249<span>元</span></p>
				<button type="button" class="btn btn-default">立即购买</button>
			</div>
		</div>
		<div class="tu7">
			<img src="T1klh_BsWv1RXrhCrK.jpg" alt=""/>
			<div class="tu71">
				<h4>光感手环多彩套装</h4>
				<p>109<span>元</span></p>
				<button type="button" class="btn btn-default">立即购买</button>
			</div>
		</div>
		<div class="tu7">
			<img src="T19Cx_BXK_1RXrhCrK.jpg" alt=""/>
			<div class="tu71">
				<h4>小米随身风扇</h4>
				<p>14.9<span>元</span></p>
				<button type="button" class="btn btn-default">立即购买</button>
			</div>
		</div>
		<div class="tu7">
			<img src="T13mA_B4D_1RXrhCrK.jpg" alt=""/>
			<div class="tu71">
				<h4>小米自拍杆</h4>
				<p>49<span>元</span></p>
				<button type="button" class="btn btn-default">立即购买</button>
			</div>
		</div>
		<div class="tu7">
			<img src="T1iSK_BXV_1RXrhCrK.jpg" alt=""/>
			<div class="tu71">
				<h4>小米摄像机</h4>
				<p>149<span>元</span></p>
				<button type="button" class="btn btn-default">立即购买</button>
			</div>
		</div>
		<div class="tu9">
			<img src="14-f5b545b3fe.png">
		</div>
</div>
	<div class="quan">
		<div class="tu10">
			<img src="8-2e4b7bee0d.jpg" alt=""/>
			<div class="tu11">
				<img src="btn1-2d0c1471e5.png" alt=""/>
				<img src="btn4-23ccdf3b97.png" alt=""/>
				<p>9998人已赞</p>
			</div>
		</div>
		<div class="tu10">
			<img src="8-2e4b7bee0d.jpg" alt=""/>
			<div class="tu11">
				<img src="btn1-2d0c1471e5.png" alt=""/>
				<img src="btn4-23ccdf3b97.png" alt=""/>
				<p>9998人已赞</p>
			</div>
		</div>
		<div class="tu10">
			<img src="8-2e4b7bee0d.jpg" alt=""/>
			<div class="tu11">
				<img src="btn1-2d0c1471e5.png" alt=""/>
				<img src="btn4-23ccdf3b97.png" alt=""/>
				<p>9998人已赞</p>
			</div>
		</div>
		<div class="tu10">
			<img src="8-2e4b7bee0d.jpg" alt=""/>
			<div class="tu11">
				<img src="btn1-2d0c1471e5.png" alt=""/>
				<img src="btn4-23ccdf3b97.png" alt=""/>
				<p>9998人已赞</p>
			</div>
		</div>
	</div>
</div>
<div class="wei">
	<a href="小米.html"><span>2016年5月6日  作者：赵晴阳</span></a>
	<a href="小米.html"><span>2016年5月6日  作者：赵晴阳</span></a>
	<a href="小米.html"><span>2016年5月6日  作者：赵晴阳</span></a>
	<a href="小米.html"><span>2016年5月6日  作者：赵晴阳</span></a>

</div>
</body>
</html>
<script>
	$(function(){
		function fullwidth() {
			if ($('body').width() >= 720){
				$('html').css('font-size',100 + 'px');
				return;
			}
			var scale = $('body').width() / 720;
			$('html').css('font-size',100*scale + 'px');
		}
		fullwidth();
		$(window).resize(function(){
			fullwidth();
		})
	});
</script>